<template>
  <el-header class="topbar">
    <div class="search-box">
      <el-input
          placeholder="搜索内容、用户..."
          prefix-icon="Search"
          style="width: 240px"
      />
    </div>
    <div class="topbar-actions">
      <el-dropdown trigger="click">
        <div class="action-item">
          <el-icon><Bell /></el-icon>
          <el-badge is-dot />
        </div>
      </el-dropdown>
      <el-dropdown trigger="click">
        <div class="action-item">
          <el-icon><Message /></el-icon>
        </div>
      </el-dropdown>
      <el-dropdown trigger="click">
        <div class="action-item">
          <el-avatar src="https://example.com/admin-avatar.jpg" />
          <span class="admin-name">管理员</span>
          <el-icon class="arrow"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { Bell, Message, ArrowDown } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const handleLogout = () => {
  router.push('/login');
};
</script>

<style scoped>
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-box {
  display: flex;
  align-items: center;
}

.topbar-actions {
  display: flex;
  align-items: center;
}

.action-item {
  display: flex;
  align-items: center;
  margin-left: 20px;
  cursor: pointer;
}

.admin-name {
  margin: 0 8px;
}

.arrow {
  font-size: 14px;
}
</style>